<template>
<header id="site-header" class="">
  <div class="container">
      <nav class="navbar navbar-expand-lg stroke p-0">
          <h1> <a class="navbar-brand" href="javascript:void(0)"  @click="back()">
                  <span class="iconfont icon-fanhui"></span> {{food.name}}
              </a></h1>   
      </nav>
  </div>
</header>
<!--/header-->
<div class="w3l-banner py-5">
     <!-- <div class="banner row ">
            <img class="img-fluid rounded" src="../assets/images/banner.jpg" alt="">
        </div> -->
    <div class="container py-lg-3 py-md-3">
       
        <div class="ban-content-inf row py-lg-3">
            <div class="maghny-gd-1 col-lg-8">
                <div class="maghny-grid">
                    <figure class="effect-lily border-radius">
                        <img class="img-fluid rounded" :src="food.header.images[0]" alt="">
                        <figcaption class="figure-caption">{{food.header.imageName}}</figcaption>
                    </figure>
                </div>
            </div>
            <div class="maghny-gd-1 col-lg-4  mt-lg-0 mt-4 mobile-grid row">
                <div class="maghny-gd-1  col-lg-12  col-md-6 col-sm-6 col-6">
                    <div class="maghny-grid">
                        <figure class="effect-lily border-radius">
                            <img class="img-fluid rounded" :src="food.header.images[1]" alt="" />
                        </figure>
                    </div>
                </div>
                <div class="maghny-gd-1 mt-lg-4 col-lg-12  col-md-6 col-sm-6 col-6">
                    <div class="maghny-grid">
                        <figure class="effect-lily border-radius">
                            <img class="img-fluid rounded" :src="food.header.images[2]" alt="" />
                        </figure>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 主要内容 -->
<div class="w3l-searchblock w3l-homeblock1 py-5 ">
    <div class=" py-lg-4 py-md-3 ">
        <!-- block -->
        <div class="row">
            <div class="col-lg-12 most-recent pr-lg-4 text-center">
                <!-- <h3 class="title-left mb-3">工艺</h3> -->
            <h1 class="section-title-01" data-sr-id="4"
                style="visibility: visible; opacity: 0.1; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transition: opacity 2.5s cubic-bezier(0.5, 0, 0, 1) 0.5s, transform 2.5s cubic-bezier(0.5, 0, 0, 1) 0.5s;">
                工艺</h1>
            <h2 class="section-title-02" data-sr-id="5"
                style="visibility: visible; opacity: 1; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -80, 0, 1); transition: opacity 2.5s cubic-bezier(0.5, 0, 0, 1) 0.5s, transform 2.5s cubic-bezier(0.5, 0, 0, 1) 0.5s;">
                工艺</h2>
            </div>
        </div>
        <div class="row grids-gap ">
                <div class="col-lg-12 align-self">
                    <div class="container py-5">
                        <p v-for="(item,index) in food.workmanship" :key="index" >{{item}}</p>
                    </div>
                </div>
        </div>        
    </div>

    <div class=" py-lg-4 py-md-3 ">
        <!-- block -->
        <div class="row">
            <div class="col-lg-12 most-recent pr-lg-4 text-center">
                <!-- <h3 class="title-left mb-3">工艺</h3> -->
            <h1 class="section-title-01" data-sr-id="4"
                style="visibility: visible; opacity: 0.1; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transition: opacity 2.5s cubic-bezier(0.5, 0, 0, 1) 0.5s, transform 2.5s cubic-bezier(0.5, 0, 0, 1) 0.5s;">
                食材用料</h1>
            <h2 class="section-title-02" data-sr-id="5"
                style="visibility: visible; opacity: 1; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -80, 0, 1); transition: opacity 2.5s cubic-bezier(0.5, 0, 0, 1) 0.5s, transform 2.5s cubic-bezier(0.5, 0, 0, 1) 0.5s;">
                食材用料</h2>
            </div>
        </div>
        <div class="row grids-gap ">
                <div class="col-lg-12 align-self">
                    <div class="container py-5 ">
                        <!-- <p v-for="(item,index) in food.workmanship" :key="index" >{{item}}</p> -->
                        <div class="row" style="width: 100%">
                            
                            <div class="col-lg-4 materials-card gy-3">
                                    <div class="card h-100" >
                                <div class="card-body " >
                                    <h1 class="card-title materials-title">主料</h1>
                                    <h6 class="card-subtitle mb-2 text-muted">Main Material</h6>
                                    <p class="card-text" v-for="(item,index) in food.material.main" :key="index">{{item}}</p>   
                                </div>
                                     </div>  
                             </div> 
                             <div class="col-lg-4 materials-card gy-3">
                                    <div class="card h-100" >
                                <div class="card-body " >
                                    <h1 class="card-title materials-title">辅料</h1>
                                    <h6 class="card-subtitle mb-2 text-muted">Subsidiary Material</h6>
                                    <p class="card-text" v-for="(item,index) in food.material.sub" :key="index">{{item}}</p>   
                                </div>
                                     </div>  
                             </div> 
                             <div class="col-lg-4 materials-card gy-3">
                                    <div class="card h-100" >
                                <div class="card-body " >
                                    <h1 class="card-title materials-title">其它</h1>
                                    <h6 class="card-subtitle mb-2 text-muted">Other</h6>
                                    <p class="card-text" v-for="(item,index) in food.material.flavor" :key="index">{{item}}</p>   
                                </div>
                                     </div>  
                             </div> 
                        </div>   
                             
                            
                      
                       
                    </div>
                    
                </div>
        </div>        
    </div>

     <div class=" py-lg-4 py-md-3 ">
        <!-- block -->
        <div class="row">
            <div class="col-lg-12 most-recent pr-lg-4 text-center">
                <!-- <h3 class="title-left mb-3">工艺</h3> -->
            <h1 class="section-title-01" data-sr-id="4"
                style="visibility: visible; opacity: 0.1; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transition: opacity 2.5s cubic-bezier(0.5, 0, 0, 1) 0.5s, transform 2.5s cubic-bezier(0.5, 0, 0, 1) 0.5s;">
                汤底</h1>
            <h2 class="section-title-02" data-sr-id="5"
                style="visibility: visible; opacity: 1; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -80, 0, 1); transition: opacity 2.5s cubic-bezier(0.5, 0, 0, 1) 0.5s, transform 2.5s cubic-bezier(0.5, 0, 0, 1) 0.5s;">
                汤底</h2>
            </div>
        </div>
        <div class="row grids-gap ">
                <div class="col-lg-12 align-self">
                    <div class="container py-5 ">
                        <div class="row" style="width: 100%">
                            <div class="card mb-3" >
                                <div class="row g-0">
                                    <div class="col-md-4 p-4">
                                    <img :src="food.soup.img" class="img-fluid rounded img-thumbnail" alt="...">
                                    </div>
                                    <div class="col-md-8">
                                    <div class="card-body">
                                        <h5 class="card-title soup-title" >{{food.soup.title}}</h5>
                                        <p class="card-text" v-for="(item,index) in food.soup.text" :key="index">{{item}}</p>
                                        <p class="card-text"><small class="text-muted">{{food.soup.small}}</small></p>
                                    </div>
                                    </div>
                                </div>
                             </div>
                           
                        </div>   
                    </div>
                    
                </div>
        </div>        
    </div>
     <div class=" py-lg-4 py-md-3 ">
        <!-- block -->
        <div class="row">
            <div class="col-lg-12 most-recent pr-lg-4 text-center">
                <!-- <h3 class="title-left mb-3">工艺</h3> -->
            <h1 class="section-title-01" data-sr-id="4"
                style="visibility: visible; opacity: 0.1; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transition: opacity 2.5s cubic-bezier(0.5, 0, 0, 1) 0.5s, transform 2.5s cubic-bezier(0.5, 0, 0, 1) 0.5s;">
                价格</h1>
            <h2 class="section-title-02" data-sr-id="5"
                style="visibility: visible; opacity: 1; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -80, 0, 1); transition: opacity 2.5s cubic-bezier(0.5, 0, 0, 1) 0.5s, transform 2.5s cubic-bezier(0.5, 0, 0, 1) 0.5s;">
                价格</h2>
            </div>
        </div>
        <div class="row grids-gap ">
                <div class="col-lg-12 align-self">
                    <div class="container py-5 ">
                        <div class="row" style="width: 100%">
                           <h1 class="display-1">价格（Price）： <small class="text-muted">10￥</small></h1>
                           <button type="button" class="btn btn-warning col-lg-1">点我立即抢购</button>
                        </div>   
                    </div>
                    
                </div>
        </div>        
    </div>

</div>  


</template>

<script setup>
import { ref,onMounted} from "vue";
import { useRouter,useRoute } from 'vue-router'
import '../assets/css/foodDetail.css'
const imageUrl="http://119.23.227.231:5000/"
const router = useRouter()
let route = useRoute()
// 返回上一页
const back=()=>{
    router.push({ path: '/' })
}

// 食物内容
const foodList=[
    {
        name:"云记狮头饺",
        header:{
            images:[imageUrl+"images/狮头饺4.png",imageUrl+"/images/狮头饺2.png",imageUrl+"/images/狮头饺2.png"],
            imageName:"狮头饺宣传图"
        },
        workmanship:[
            "竹升面是广东省广州市的一种特色小吃，属于粤菜，因避讳粤语因“竿”字发音不吉利而改称“升”。竹升面是用传统的方法搓面、和面，用竹升（大茅竹竿）压打出来的面条、云吞皮的一类面食。",
            "竹升面早在民国时期流行于广州西关一带的传统面，上世纪五、六十年代，来上一碗竹升面，曾是广州人大快朵颐的一种口福。自从上世纪五十年代后期，面条工艺机械化后，竹升面制作工艺由手工制面转变为机器和面、延压、切面，并延续。在《舌尖上的中国》第一部第二集面食专题中为南派面食挣得一席之地的老牌传统面。",
            "竹升面的特点是碱水少，甚至不放碱水， 它最大的难度在于不放碱水还一样的爽滑弹牙。这是用竹竿搓面的秘密所在。 竹升面的做法包括两种，一种是全蛋面，以鸭蛋和面，绝不加一滴水，其面条爽滑韧性好，蛋味香浓;另一种是半蛋面，用鸭蛋与一定比例的水调配和面，面条爽滑可口，口感细腻。 面条搭配的汤也很关键，选用猪骨、大地鱼、虾籽及祖传的秘制材料熬制3小时以上才够火候。",
            "竹升面挑选的竹竿有讲究的，要够粗大，保证它有比较大的覆压面，代替人的双手。 师傅搓完面团后，把面团放在案板上，然后骑坐在竹竿那头，用脚一蹬一蹬，竹竿碾压着面团，师傅要一边压打一边移动，让面团受力均匀，渐渐变成一条摊开的毛巾。一两个小时后，面团便可以揉拉成一根根银丝一样幼细的面条。 在碾压过程中，不加一滴水。 通常和面的时候，都不会加水，也不会加鸡蛋，而是用鸭蛋， 用鸭蛋打出来的面既爽口而且充满了蛋香味道。"
        ],
        material:{
            main:["猪肉（1000g）","蟹粉（10g）","鸡蛋（100g）"],
            sub:["淀粉（1000g）","葱（100g）","细盐（1勺）","酱油（2勺）"],
            flavor:["咸鲜（口味）","炖（工艺）","一小时（耗时）"]
        },
        soup:{
            img:imageUrl+"/images/鱼胶汤.jpg",
            title:"鱼胶汤",
            text:["1、鱼胶中的磷、锌、锰等元素都对人体多种生理活动尤其对生殖功能作用突出，对促进性功能的提高有很大帮助，最适合工作压力大和工作劳心者。","2、一夜知冬暖，鱼胶补血活血，缓解手脚冰冷，温和体温。","3、对爱美的女人来讲，鱼胶是补充胶原蛋白，保持恢复皮肤弹性的最佳选择，能滋润皮肤，使女人的肌肤细腻光滑，脸色更红润。","4、经常食用鱼胶的人很少感冒，因为鱼胶中丰富的蛋白质，精氨酸是人体免疫功能所必须的物质，能预防疾病感染，调整机体的免疫力，对感冒等传染性疾病有很好的预防功能。"],
            small:"鱼胶汤 上等佳品"
        }
    },
    {
        name:"海鲜竹升面",
        header:{
            images:[imageUrl+"/images/海鲜面2.png",imageUrl+"/images/海鲜面1.png",imageUrl+"/images/海鲜面.png"],
            imageName:"海鲜竹升面宣传图"
        },
        workmanship:[
            "竹升面是广东省广州市的一种特色小吃，属于粤菜，因避讳粤语因“竿”字发音不吉利而改称“升”。竹升面是用传统的方法搓面、和面，用竹升（大茅竹竿）压打出来的面条、云吞皮的一类面食。",
            "竹升面早在民国时期流行于广州西关一带的传统面，上世纪五、六十年代，来上一碗竹升面，曾是广州人大快朵颐的一种口福。自从上世纪五十年代后期，面条工艺机械化后，竹升面制作工艺由手工制面转变为机器和面、延压、切面，并延续。在《舌尖上的中国》第一部第二集面食专题中为南派面食挣得一席之地的老牌传统面。",
            "竹升面的特点是碱水少，甚至不放碱水， 它最大的难度在于不放碱水还一样的爽滑弹牙。这是用竹竿搓面的秘密所在。 竹升面的做法包括两种，一种是全蛋面，以鸭蛋和面，绝不加一滴水，其面条爽滑韧性好，蛋味香浓;另一种是半蛋面，用鸭蛋与一定比例的水调配和面，面条爽滑可口，口感细腻。 面条搭配的汤也很关键，选用猪骨、大地鱼、虾籽及祖传的秘制材料熬制3小时以上才够火候。",
            "竹升面挑选的竹竿有讲究的，要够粗大，保证它有比较大的覆压面，代替人的双手。 师傅搓完面团后，把面团放在案板上，然后骑坐在竹竿那头，用脚一蹬一蹬，竹竿碾压着面团，师傅要一边压打一边移动，让面团受力均匀，渐渐变成一条摊开的毛巾。一两个小时后，面团便可以揉拉成一根根银丝一样幼细的面条。 在碾压过程中，不加一滴水。 通常和面的时候，都不会加水，也不会加鸡蛋，而是用鸭蛋， 用鸭蛋打出来的面既爽口而且充满了蛋香味道。"
        ],
        material:{
            main:["猪肉（1000g）","蟹粉（10g）","鸡蛋（100g）"],
            sub:["淀粉（1000g）","葱（100g）","细盐（1勺）","酱油（2勺）"],
            flavor:["咸鲜（口味）","炖（工艺）","一小时（耗时）"]
        },
        soup:{
            img:imageUrl+"/images/鱼胶汤.jpg",
            title:"鱼胶汤",
            text:["1、鱼胶中的磷、锌、锰等元素都对人体多种生理活动尤其对生殖功能作用突出，对促进性功能的提高有很大帮助，最适合工作压力大和工作劳心者。","2、一夜知冬暖，鱼胶补血活血，缓解手脚冰冷，温和体温。","3、对爱美的女人来讲，鱼胶是补充胶原蛋白，保持恢复皮肤弹性的最佳选择，能滋润皮肤，使女人的肌肤细腻光滑，脸色更红润。","4、经常食用鱼胶的人很少感冒，因为鱼胶中丰富的蛋白质，精氨酸是人体免疫功能所必须的物质，能预防疾病感染，调整机体的免疫力，对感冒等传染性疾病有很好的预防功能。"],
            small:"鱼胶汤 上等佳品"
        }
    },
     {
        name:"炸酱面",
        header:{
            images:[imageUrl+"/images/炸酱面3.png",imageUrl+"/images/炸酱面1.png",imageUrl+"/images/炸酱面2.png"],
            imageName:"炸酱面宣传图"
        },
        workmanship:[
            "竹升面是广东省广州市的一种特色小吃，属于粤菜，因避讳粤语因“竿”字发音不吉利而改称“升”。竹升面是用传统的方法搓面、和面，用竹升（大茅竹竿）压打出来的面条、云吞皮的一类面食。",
            "竹升面早在民国时期流行于广州西关一带的传统面，上世纪五、六十年代，来上一碗竹升面，曾是广州人大快朵颐的一种口福。自从上世纪五十年代后期，面条工艺机械化后，竹升面制作工艺由手工制面转变为机器和面、延压、切面，并延续。在《舌尖上的中国》第一部第二集面食专题中为南派面食挣得一席之地的老牌传统面。",
            "竹升面的特点是碱水少，甚至不放碱水， 它最大的难度在于不放碱水还一样的爽滑弹牙。这是用竹竿搓面的秘密所在。 竹升面的做法包括两种，一种是全蛋面，以鸭蛋和面，绝不加一滴水，其面条爽滑韧性好，蛋味香浓;另一种是半蛋面，用鸭蛋与一定比例的水调配和面，面条爽滑可口，口感细腻。 面条搭配的汤也很关键，选用猪骨、大地鱼、虾籽及祖传的秘制材料熬制3小时以上才够火候。",
            "竹升面挑选的竹竿有讲究的，要够粗大，保证它有比较大的覆压面，代替人的双手。 师傅搓完面团后，把面团放在案板上，然后骑坐在竹竿那头，用脚一蹬一蹬，竹竿碾压着面团，师傅要一边压打一边移动，让面团受力均匀，渐渐变成一条摊开的毛巾。一两个小时后，面团便可以揉拉成一根根银丝一样幼细的面条。 在碾压过程中，不加一滴水。 通常和面的时候，都不会加水，也不会加鸡蛋，而是用鸭蛋， 用鸭蛋打出来的面既爽口而且充满了蛋香味道。"
        ],
        material:{
            main:["猪肉（1000g）","蟹粉（10g）","鸡蛋（100g）"],
            sub:["淀粉（1000g）","葱（100g）","细盐（1勺）","酱油（2勺）"],
            flavor:["咸鲜（口味）","炖（工艺）","一小时（耗时）"]
        },
        soup:{
            img:imageUrl+"/images/鱼胶汤.jpg",
            title:"鱼胶汤",
            text:["1、鱼胶中的磷、锌、锰等元素都对人体多种生理活动尤其对生殖功能作用突出，对促进性功能的提高有很大帮助，最适合工作压力大和工作劳心者。","2、一夜知冬暖，鱼胶补血活血，缓解手脚冰冷，温和体温。","3、对爱美的女人来讲，鱼胶是补充胶原蛋白，保持恢复皮肤弹性的最佳选择，能滋润皮肤，使女人的肌肤细腻光滑，脸色更红润。","4、经常食用鱼胶的人很少感冒，因为鱼胶中丰富的蛋白质，精氨酸是人体免疫功能所必须的物质，能预防疾病感染，调整机体的免疫力，对感冒等传染性疾病有很好的预防功能。"],
            small:"鱼胶汤 上等佳品"
        }
    },
     {
        name:"牛腩竹升面",
        header:{
            images:[imageUrl+"/images/牛腩面1.png",imageUrl+"/images/牛腩面.png",imageUrl+"/images/牛腩面.png"],
            imageName:"牛腩竹升面宣传图"
        },
        workmanship:[
            "竹升面是广东省广州市的一种特色小吃，属于粤菜，因避讳粤语因“竿”字发音不吉利而改称“升”。竹升面是用传统的方法搓面、和面，用竹升（大茅竹竿）压打出来的面条、云吞皮的一类面食。",
            "竹升面早在民国时期流行于广州西关一带的传统面，上世纪五、六十年代，来上一碗竹升面，曾是广州人大快朵颐的一种口福。自从上世纪五十年代后期，面条工艺机械化后，竹升面制作工艺由手工制面转变为机器和面、延压、切面，并延续。在《舌尖上的中国》第一部第二集面食专题中为南派面食挣得一席之地的老牌传统面。",
            "竹升面的特点是碱水少，甚至不放碱水， 它最大的难度在于不放碱水还一样的爽滑弹牙。这是用竹竿搓面的秘密所在。 竹升面的做法包括两种，一种是全蛋面，以鸭蛋和面，绝不加一滴水，其面条爽滑韧性好，蛋味香浓;另一种是半蛋面，用鸭蛋与一定比例的水调配和面，面条爽滑可口，口感细腻。 面条搭配的汤也很关键，选用猪骨、大地鱼、虾籽及祖传的秘制材料熬制3小时以上才够火候。",
            "竹升面挑选的竹竿有讲究的，要够粗大，保证它有比较大的覆压面，代替人的双手。 师傅搓完面团后，把面团放在案板上，然后骑坐在竹竿那头，用脚一蹬一蹬，竹竿碾压着面团，师傅要一边压打一边移动，让面团受力均匀，渐渐变成一条摊开的毛巾。一两个小时后，面团便可以揉拉成一根根银丝一样幼细的面条。 在碾压过程中，不加一滴水。 通常和面的时候，都不会加水，也不会加鸡蛋，而是用鸭蛋， 用鸭蛋打出来的面既爽口而且充满了蛋香味道。"
        ],
        material:{
            main:["猪肉（1000g）","蟹粉（10g）","鸡蛋（100g）"],
            sub:["淀粉（1000g）","葱（100g）","细盐（1勺）","酱油（2勺）"],
            flavor:["咸鲜（口味）","炖（工艺）","一小时（耗时）"]
        },
        soup:{
            img:imageUrl+"/images/鱼胶汤.jpg",
            title:"鱼胶汤",
            text:["1、鱼胶中的磷、锌、锰等元素都对人体多种生理活动尤其对生殖功能作用突出，对促进性功能的提高有很大帮助，最适合工作压力大和工作劳心者。","2、一夜知冬暖，鱼胶补血活血，缓解手脚冰冷，温和体温。","3、对爱美的女人来讲，鱼胶是补充胶原蛋白，保持恢复皮肤弹性的最佳选择，能滋润皮肤，使女人的肌肤细腻光滑，脸色更红润。","4、经常食用鱼胶的人很少感冒，因为鱼胶中丰富的蛋白质，精氨酸是人体免疫功能所必须的物质，能预防疾病感染，调整机体的免疫力，对感冒等传染性疾病有很好的预防功能。"],
            small:"鱼胶汤 上等佳品"
        }
    },

    {
        name:"云吞竹升面",
        header:{
            images:[imageUrl+"/images/云吞面2.png",imageUrl+"/images/净云吞.png",imageUrl+"/images/云吞面1.png"],
            imageName:"云吞竹升面宣传图"
        },
        workmanship:[
            "竹升面是广东省广州市的一种特色小吃，属于粤菜，因避讳粤语因“竿”字发音不吉利而改称“升”。竹升面是用传统的方法搓面、和面，用竹升（大茅竹竿）压打出来的面条、云吞皮的一类面食。",
            "竹升面早在民国时期流行于广州西关一带的传统面，上世纪五、六十年代，来上一碗竹升面，曾是广州人大快朵颐的一种口福。自从上世纪五十年代后期，面条工艺机械化后，竹升面制作工艺由手工制面转变为机器和面、延压、切面，并延续。在《舌尖上的中国》第一部第二集面食专题中为南派面食挣得一席之地的老牌传统面。",
            "竹升面的特点是碱水少，甚至不放碱水， 它最大的难度在于不放碱水还一样的爽滑弹牙。这是用竹竿搓面的秘密所在。 竹升面的做法包括两种，一种是全蛋面，以鸭蛋和面，绝不加一滴水，其面条爽滑韧性好，蛋味香浓;另一种是半蛋面，用鸭蛋与一定比例的水调配和面，面条爽滑可口，口感细腻。 面条搭配的汤也很关键，选用猪骨、大地鱼、虾籽及祖传的秘制材料熬制3小时以上才够火候。",
            "竹升面挑选的竹竿有讲究的，要够粗大，保证它有比较大的覆压面，代替人的双手。 师傅搓完面团后，把面团放在案板上，然后骑坐在竹竿那头，用脚一蹬一蹬，竹竿碾压着面团，师傅要一边压打一边移动，让面团受力均匀，渐渐变成一条摊开的毛巾。一两个小时后，面团便可以揉拉成一根根银丝一样幼细的面条。 在碾压过程中，不加一滴水。 通常和面的时候，都不会加水，也不会加鸡蛋，而是用鸭蛋， 用鸭蛋打出来的面既爽口而且充满了蛋香味道。"
        ],
        material:{
            main:["猪肉（1000g）","蟹粉（10g）","鸡蛋（100g）"],
            sub:["淀粉（1000g）","葱（100g）","细盐（1勺）","酱油（2勺）"],
            flavor:["咸鲜（口味）","炖（工艺）","一小时（耗时）"]
        },
        soup:{
            img:imageUrl+"/images/鱼胶汤.jpg",
            title:"鱼胶汤",
            text:["1、鱼胶中的磷、锌、锰等元素都对人体多种生理活动尤其对生殖功能作用突出，对促进性功能的提高有很大帮助，最适合工作压力大和工作劳心者。","2、一夜知冬暖，鱼胶补血活血，缓解手脚冰冷，温和体温。","3、对爱美的女人来讲，鱼胶是补充胶原蛋白，保持恢复皮肤弹性的最佳选择，能滋润皮肤，使女人的肌肤细腻光滑，脸色更红润。","4、经常食用鱼胶的人很少感冒，因为鱼胶中丰富的蛋白质，精氨酸是人体免疫功能所必须的物质，能预防疾病感染，调整机体的免疫力，对感冒等传染性疾病有很好的预防功能。"],
            small:"鱼胶汤 上等佳品"
        }
    },
    {
        name:"猪油捞面",
        header:{
            images:[imageUrl+"/images/猪油捞面1.png",imageUrl+"/images/猪油捞面.png",imageUrl+"/images/猪油捞面2.png"],
            imageName:"牛腩竹升面宣传图"
        },
        workmanship:[
            "竹升面是广东省广州市的一种特色小吃，属于粤菜，因避讳粤语因“竿”字发音不吉利而改称“升”。竹升面是用传统的方法搓面、和面，用竹升（大茅竹竿）压打出来的面条、云吞皮的一类面食。",
            "竹升面早在民国时期流行于广州西关一带的传统面，上世纪五、六十年代，来上一碗竹升面，曾是广州人大快朵颐的一种口福。自从上世纪五十年代后期，面条工艺机械化后，竹升面制作工艺由手工制面转变为机器和面、延压、切面，并延续。在《舌尖上的中国》第一部第二集面食专题中为南派面食挣得一席之地的老牌传统面。",
            "竹升面的特点是碱水少，甚至不放碱水， 它最大的难度在于不放碱水还一样的爽滑弹牙。这是用竹竿搓面的秘密所在。 竹升面的做法包括两种，一种是全蛋面，以鸭蛋和面，绝不加一滴水，其面条爽滑韧性好，蛋味香浓;另一种是半蛋面，用鸭蛋与一定比例的水调配和面，面条爽滑可口，口感细腻。 面条搭配的汤也很关键，选用猪骨、大地鱼、虾籽及祖传的秘制材料熬制3小时以上才够火候。",
            "竹升面挑选的竹竿有讲究的，要够粗大，保证它有比较大的覆压面，代替人的双手。 师傅搓完面团后，把面团放在案板上，然后骑坐在竹竿那头，用脚一蹬一蹬，竹竿碾压着面团，师傅要一边压打一边移动，让面团受力均匀，渐渐变成一条摊开的毛巾。一两个小时后，面团便可以揉拉成一根根银丝一样幼细的面条。 在碾压过程中，不加一滴水。 通常和面的时候，都不会加水，也不会加鸡蛋，而是用鸭蛋， 用鸭蛋打出来的面既爽口而且充满了蛋香味道。"
        ],
        material:{
            main:["猪肉（1000g）","蟹粉（10g）","鸡蛋（100g）"],
            sub:["淀粉（1000g）","葱（100g）","细盐（1勺）","酱油（2勺）"],
            flavor:["咸鲜（口味）","炖（工艺）","一小时（耗时）"]
        },
        soup:{
            img:imageUrl+"/images/鱼胶汤.jpg",
            title:"鱼胶汤",
            text:["1、鱼胶中的磷、锌、锰等元素都对人体多种生理活动尤其对生殖功能作用突出，对促进性功能的提高有很大帮助，最适合工作压力大和工作劳心者。","2、一夜知冬暖，鱼胶补血活血，缓解手脚冰冷，温和体温。","3、对爱美的女人来讲，鱼胶是补充胶原蛋白，保持恢复皮肤弹性的最佳选择，能滋润皮肤，使女人的肌肤细腻光滑，脸色更红润。","4、经常食用鱼胶的人很少感冒，因为鱼胶中丰富的蛋白质，精氨酸是人体免疫功能所必须的物质，能预防疾病感染，调整机体的免疫力，对感冒等传染性疾病有很好的预防功能。"],
            small:"鱼胶汤 上等佳品"
        }
    },
    
]


var food=ref(0)
// 数据初始化
const init=()=>{
    
    const foodId=route.query.foodDetailid
    
    if(foodId==undefined || foodId==null){
            foodId=  sessionStorage.getItem("foodDetailid")      
    }
    console.log(foodId);
    food=ref(foodList[foodId])
}

init()



   









</script>

<style >


</style>